<div class="cad-image-content">
  <div class="image-content">
    <div class="drag-container">
      <div *ngIf="isLoading" class="drag-container-loading">
        <apes-spin apesSimple></apes-spin>
      </div>
      <img [src]="currentImg" style="display: none;" id="oImg">
      <svg class="image-content-svg" height="100%" width="100%">
        <g height="100%" width="100%" cdkDrag cdkDragBoundary="" (mousewheel)="zoomInAndOut($event)"
            (cdkDragMoved)="dragStart()">
          <image [attr.xlink:href]="currentImg"></image>
          <rect *ngFor="let point of points" [attr.x]="point.x" [attr.y]="point.y" [attr.height]="point.h" [attr.width]="point.w" [attr.data-sn]="point.sn" class="svg-rect" [ngClass]="{'svg-rect-selected':point.activate}" (click)="checkRect(point.sn)"></rect>
        </g>
      </svg>
    </div>
    <div class="image-tools">
      <button apes-button apesType="default" apesShape="circle" class="zoomOut" (click)="zoomOut()">
        <i apes-icon apesType="zoom-in"></i>
      </button>
      <button apes-button apesType="default" apesShape="circle" class="zoomIn" (click)="zoomIn()">
        <i apes-icon apesType="zoom-out"></i>
      </button>
      <button apes-button apesType="default" apesShape="circle" class="reset" (click)="reset()">
        <i apes-icon apesType="sync"></i>
      </button>
    </div>
  </div>
  <div class="image-choose">
    <ng-container *ngIf="images.length > 1">
      <div class="image-choose-img" *ngFor=" let image of images; let i=index;" [ngClass]="{'image-choose-select': i == selectImg}" (click)="toggleImg(image,i)">
        <img [src]="image.url">
      </div>
    </ng-container>
  </div>
</div>
